<template>
  <div class="wuliu" >
      <top2></top2>
      <div class="con">
          <div class="t_search_box">
            <div style="display: flex;">
              <el-button type="danger" class="t_dr_btn"  @click="logkai">上传查询信息</el-button>

              <el-button type="text" style="margin-left: 10px;" @click="xiazai">下载模板</el-button>
            </div>
          </div>
          <div>
            <el-table
            :header-cell-style="{
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="user_name"
                align="center"
                label="查询人">
              </el-table-column>
              <el-table-column
                prop="created_at"
                align="center"
                label="查询时间">
              </el-table-column>
              <el-table-column
                prop="find_num"
                align="center"
                label="查询总数量">
              </el-table-column>
              <el-table-column
                prop="already_num"
                align="center"
                label="已查询数量">
              </el-table-column>
              <el-table-column
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <div class="kflexcc">
                    <!-- 0 未开始 100 查询中 200 已完成 -->
                    <div style="color: rgb(25, 137, 250); margin: 0 20px; cursor: pointer;" @click="xiazai2(scope.row)" v-if="scope.row.state == 200">下载查询结果</div>
                    <div style="color: rgb(25, 137, 250);" v-if="scope.row.state == 100">查询执行中...</div>
                  </div>
                </template>
              </el-table-column>

            </el-table>
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                :page-size="searchform.pageSize"
                layout="total,prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
    <el-dialog title="上传查询信息" center :visible.sync="log" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">

    	  <div class="kflexc" style="margin-top: 20px;">
    	    <div style="width: 100px;">上传表格</div>
          <div v-if="all.data.length > 0" style="margin-right: 10px;">已上传{{all.data.length}}个</div>
          <upload-excel-component  class="t_dr_btn" style="background: rgb(46, 122, 255) !important;  "  @on-selected-file="exportData" buttonName="上传查询信息"></upload-excel-component>
    	  </div>
    	  <span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="log = false">取消</el-button>
    		<el-button type="danger" round @click="shangchuan">确定</el-button>
    	  </span>
    </el-dialog>
  </div>
</template>

<script>
  import top2 from './top.vue'
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent,
      top2
    },
    name: 'haomayuechaxun',
    data() {
      return {
        shopid:'',
        searchform:{
          page:1,
          pageSize:20
        },
        tableData: [],
        total:0,
        log:false,
        all:{
          data:[]
        }
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //列表
      this.getlist()

    },
    methods: {
      logkai:function(){
        this.all = {
          data:[]
        }
        this.log = true
      },
      shangchuan:function(){
        console.log('上传数据')
        console.log(this.all)
        // return
        axios.post("/api/plan-market/upstream/online/add", {
          orders: this.all.data,
          })
          .then(response=> {
            if (response.data.msg.code == 0) {
              this.getlist();
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //列表
      getlist(){
        axios.get('/api/plan-market/upstream/online/get',{
          params:{
            page:this.searchform.page,
            pageSize:this.searchform.pageSize,
          }
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      changepage(val){
        console.log(val)
        this.searchform.page = val
        this.getlist()
      },
      xiazai2:function(item){
        const a = document.createElement('a');
        a.setAttribute('download', '下载查询结果.xlsx');
        a.setAttribute('href', item.excel_path);
        a.click();
      },
      //下载模板
      xiazai:function(){
				const a = document.createElement('a');
				a.setAttribute('download', '查询信息.xlsx');
				a.setAttribute('href', window.location.origin+window.location.pathname+'static/moban/netchaxun.xlsx');
				a.click();
			},
      //导入
      exportData(data) {
        var that = this
        let list = []
        for (var i = 0; i < data.results.length; i++) {
          list.push({order_id:data.results[i]['订单号'],upstream_order_id:data.results[i]['上游订单号'],plan_mobile_produced:data.results[i]['生产号码']})

        }
        this.all.data = list

			},
    },
    beforeDestroy(){

    },


  }
</script>

<style  scoped>
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      /* justify-content: space-between; */
      align-items: center;
      background:#f9f9f9;
    }
    .powertopcon {
      display: flex;
      width: 800px;
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      line-height: 50px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }

    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    /* .t_search_box{
      display: flex;
      flex-wrap: wrap;
    } */
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;

    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }

</style>
<!-- <style lang="scss" scoped>
  .wuliu {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style> -->
